<template>
  <div class="bigbox">
    <div class="ipt">
      名称<el-input v-model="input" placeholder="属性名称"></el-input>
      分类<el-button type="primary"  @click="searchFn">查询</el-button
      ><el-button type="primary" @click="addFn">添加</el-button>
    </div>

    <div class="btm">
      <el-table border style="width: 100%" :data="getBrandLists">
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="name" label="品牌名称"></el-table-column>
        <el-table-column prop="floor_price" label="最低价"></el-table-column>
        <el-table-column prop="is_new" label="新品">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              {{
                scope.row.is_new === 1 ? "是" : "否"
              }}
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="is_show" label="显示">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              {{
                scope.row.is_show === 1 ? "是" : "否"
              }}
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="caozuo" label="操作">

            <template slot-scope="scope">
            <el-button type="primary" @click="bianji(scope.row.id)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="last">
        <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="this.count">
    </el-pagination>
    </div>
  </div>
  </div>
</template>

<script>
import { getBrandLists } from "../../request/httpApi";
export default {
  data() {
    return {
      input: "",
      getBrandLists: [],
      page:1, // 页数
      count:0 ,//总数
      pageSize:10, //个数
    };
  },

  created() {
    this.xuanran()
  },
  methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize=` ${val}`
        this.xuanran()
      },
      handleCurrentChange(val) {
        // console.log(`当前页: ${val}`);
        this.page = `${val}`
        console.log(this.page);
        this.xuanran()
      },

    //   分装渲染
    xuanran(){
        getBrandLists({
        page:this.page,
        size:this.pageSize
    }).then((res) => {
      console.log(res.data);
      this.getBrandLists = res.data.data;
      this.count = res.data.count
    });
    },
    // 查询 
    searchFn(){
        console.log(this.input);
        getBrandLists({
        page:this.page,
        size:this.pageSize,
        name:this.input
    }).then((res) => {
      console.log(res.data);
      this.getBrandLists = res.data.data;
      this.count = res.data.count
    });
    },

    // 跳转添加页
    addFn(){
        this.$router.push('/addbrand')
    },

    // 跳转编辑页
    bianji(e){
      this.$router.push(`/editbrand/${e}`)
    }
    },

   
};
</script>

<style lang="less" scoped>
.bigbox {
  padding-top: 20px;
  padding-bottom: 160px;
  background-color: #fff;
  .ipt {
    padding-bottom: 20px;
    padding-left: 20px;
    .el-input {
      margin-left: 15px;
      width: 210px;
      margin-right: 15px;
      /deep/ .el-input__inner {
        height: 36px;
        line-height: 36px;
        border-radius: 5px;
      }
    }
    .el-button--primary {
      margin-left: 15px;
    }
  }

  .btm{
     .el-tag--medium {
      color: #333;
      background: #fff;
      border: none;
    } 
  }
  .last {
    padding-top: 20px;
    position: absolute;
    right: 0;
  }
}
</style>
